<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #good_details:hover{
        color:red;
        cursor:pointer;
    }
    [id^=type-]:hover{
        color:red;
        cursor:pointer;
    }
</style>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script  th:src="@{/js/jquery-1.11.3.min.js}"></script>
<body>



<!--主体-->
<div style="display: flex">
    <i class="layui-icon layui-icon-return" onclick="window.location='/admin'" style="margin-left: 30px;margin-top: 10px"></i>

    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">商品类型</label>
            <div class="layui-input-inline">
                <select  lay-filter="goodstype" id="goodstype" name="tno" >
                    <option th:value="${t.tno}" th:each="t:${alltype}" th:text="${t.name}"></option>
                </select>
            </div>

        </div>
    </form>

    <form class="layui-form" id="querygoods" style="display: flex">
        <div class="layui-form-item">
            <div>
                <label class="layui-form-label">查询商品</label>
                <div class="layui-input-inline">
                    <input type="text"  name="name" class="layui-input">
                </div>
            </div>
        </div>

        <button type="button" class="layui-btn layui-btn-radius layui-btn-warm" lay-submit lay-filter="querygoods">查询</button>
    </form>


</div>



<div style="display: flex">

    <!--右边栏，商品展示-->
<div style="padding:10px; display: flex;flex-wrap: wrap" id="goodsDiv">
    <!--商品展示框-->
<!--<div style="padding:10px; border: solid lightgray 1px;width:21%;box-shadow:0 0 5px lightgray;margin: 5px 5px" th:each="x:${#numbers.sequence(1,8)}">-->
<!--<div > <img style="width:200px;height:200px;"src="/images/index/img.png"></div>-->
<!--<div style="color:orangered">￥<span style="font-size:20px">298</span></div>-->
<!--<div id="good_details">春夏新款学生背带裙套装春夏新款学生背带裙套装</div>-->
</div>
</div>



</body>
<script th:inline="javascript" type="text/javascript">


    $(function () {


        layui.use('form', function () {
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;

            let goodsDiv = $("#goodsDiv")
            let allgoods = [[${allgoods}]];

            //进入页面时查询所有商品
            for (let x = 0; x < allgoods.length; x++) {
                let goods = allgoods[x];
                let goodsItem = $("<div style=\"padding:10px; border: solid lightgray 1px;width:200px;box-shadow:0 0 5px lightgray;margin: 5px 5px\">\n" +
                    "<div > <img style=\"width:200px;height:200px;\"src='" + goods.icon + "'/></div>\n" +
                    "<div style=\"color:orangered\">￥<span style=\"font-size:20px\">" + goods.price + "</span></div>\n" +
                    "<div id=\"good_details\">" + goods.name + "</div>\n" +
                    "</div>")
                $(goodsDiv).append(goodsItem);

                $(goodsItem).click(function () {
                    window.location = '/seller/goods/goodsDetail/' + goods.gno
                })
            }

            let vv =sessionStorage.key("userId")
            $("#test").click(function (){
               var aa=$("#test2").val()
                alert(aa);
            })
            //模糊查询
            form.on('submit(querygoods)',function(data){


                console.log(data.elem);
                console.log(data.form);
                console.log(data.field);



                let formData =new FormData(data.form);

                $.ajax({
                    url: '/seller/goods/queryByInput',
                    contentType: false,
                    data: formData,
                    dataType: 'json',
                    processData: false,

                    success: function(res){
                        if (res.res) {
                            goodsDiv.empty();
                            layer.msg(res.msg)
                            let data = res.data;
                            for (let x = 0; x < data.length; x++) {
                                let goods = data[x];
                                let goodsItem = $("<div style=\"padding:10px; border: solid lightgray 1px;width:200px;box-shadow:0 0 5px lightgray;margin: 5px 5px\">\n" +
                                    "<div > <img style=\"width:200px;height:200px;\"src='" + goods.icon + "'/></div>\n" +
                                    "<div style=\"color:orangered\">￥<span style=\"font-size:20px\">" + goods.price + "</span></div>\n" +
                                    "<div id=\"good_details\">" + goods.name + "</div>\n" +
                                    "</div>")
                                $(goodsDiv).append(goodsItem);

                                $(goodsDiv).click(function () {
                                    window.location = '/seller/goods/goodsDetail/' + goods.gno
                                })
                            }
                        }
                    },
                    type: 'post',
                })
            })

            //按类型查询
            form.on('select(goodstype)', function (data) {

                console.log(data.elem); //得到select原始DOM对象
                console.log(data.value); //得到被选中的值
                console.log(data.othis); //得到美化后的DOM对象

                let typeno = data.value;

                $.post('/seller/goods/getGoodsByTnoAndSno/' + typeno, {}, function (res) {
                    console.log(res)

                    goodsDiv.empty();
                    if (res.res) {
                        let data = res.data;
                        for (let x = 0; x < data.length; x++) {
                            let goods = data[x];
                            let goodsItem = $("<div style=\"padding:10px; border: solid lightgray 1px;width:200px;box-shadow:0 0 5px lightgray;margin: 5px 5px\">\n" +
                                "<div > <img style=\"width:200px;height:200px;\"src='" + goods.icon + "'/></div>\n" +
                                "<div style=\"color:orangered\">￥<span style=\"font-size:20px\">" + goods.price + "</span></div>\n" +
                                "<div id=\"good_details\">" + goods.name + "</div>\n" +
                                "</div>")
                            $(goodsDiv).append(goodsItem);

                            $(goodsDiv).click(function () {
                                window.location = '/seller/goods/goodsDetail/' + goods.gno
                            })
                        }
                    }
                })
                form.render();
            })


            form.render();
        })
    })
</script>
</html>